<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title></title>
 <script type="text/javascript" src="lib/easeljs-0.7.1.min.js"></script>
</head>
<body onload="init()">
 <canvas id = "mycanvas" width="500px" height="500px" style="border:1px solid #ccc;"></canvas>
</body>
</html>

<script type="text/javascript">
// ASCII对应表 http://www.ab173.com/doc/ascii.php

 var stage;
 const ARROW_KEY_LEFT = 37;
 // const ARROW_KEY_UP = 38;
 const ARROW_KEY_RIGHT = 39;
 // const ARROW_KEY_DOWN = 40;
 var leftkeydown,rightkeydown = false;

 function init(){
  stage = new createjs.Stage(document.getElementById("mycnavas"));
  createjs.Ticker.addEventListener("tick",tick)
   createjs.Ticker.setFPS(60);
   start();
 }

 function start(){
 	Rect = new createjs.Shape();
 	Rect.graphics.beginFill('blue').drawRect(0,0,100,20);
 	Rect.x = Rect.nextX = 0
 	// Rect.x = Rect.nextX = 0;
 	Rect.y  = 100;
 	stage.addChild(Rect)
 	window.onkeydown = moveRect;
 	window.onkeyup = stopRect;
 }

 function moveRect() {
 	e = !e ? window.event: e;
 	switch (e.keyCode) {
 		case ARROW_KEY_LEFT:
 			leftkeydown = true
 			break;
 		case ARROW_KEY_RIGHT:
 			rightkeydown = true
			break;
 	}
 }

 function stopRect() {
 	 	e = !e ? window.event: e;
	 	switch (e.keyCode) {
	 		case ARROW_KEY_LEFT:
	 			leftkeydown = false
	 			break;
	 		case ARROW_KEY_RIGHT:
	 			rightkeydown = false
				break;
 	}
 }

 function update() {
 	var nextX = Rect.x;
 	if(leftkeydown) {
 		nextX = Rect.x - 10
 		if (nextX<0) {
 			nextX = 0
 		}
 	} else if(rightkeydown) {
 		nextX = Rect.x + 10;
 		if(nextX>stage.canvas.width-Rect.width) {
 			nextX = stage.canvas.width-Rect.width
 		}
 	}
 	Rect.nextX = nextX
 }

 function render() {
 	Rect.x = Rect.nextX
 }

 function tick() {
 	update();
 	render();
 	stage.update();
 }

</script>